<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>联系人分类汇总报表</title>
  <style>
    #barChartDiv {
        width: 800px;
        height: 500px;
        margin: 50px auto;
    }
  </style>
</head>
<body>
<h2 style="text-align: center;">联系人分类汇总柱状图</h2>

<div id="barChartDiv"></div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
  /*<![CDATA[*/
  // 获取后端传递的数据
  const categories = [];
  const dataCountByCategory = [[${dataCountByCategory}]];

  // 将 List<Map<String, Integer>> 转换成 ECharts 饼图需要的格式
  const pieData = [];

  for (let i = 0; i < dataCountByCategory.length; i++) {
      const item = dataCountByCategory[i];
      console.log(item);
      const key = Object.keys(item)[0];
      const name = item[Object.keys(item)[1]]
      categories.push(name);
      const value = item[key];
      pieData.push({
          name: name,
          value: value
      });
  }

  // 初始化 ECharts 实例
  const barChart = echarts.init(document.getElementById('barChartDiv'));

  // 配置项
  const barOption = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: categories,
            axisLabel: {
                rotate: 30
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '联系人数量',
                type: 'bar',
                data: pieData,
                itemStyle: {
                    color: '#73C0DE'
                },
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ]
    };


  // 使用配置项
  barChart.setOption(barOption);
  /*]]>*/
</script>
</body>
</html>
